<template>
  <div class="work-header bg flex felx-a-c flex-j-s-b">
    <div class="work-left flex flex-a-c">
      <img alt="" src="@images/header/yunLogo.png" />
      <div class="inc">iNC-Cloud</div>
      |
      <div class="shop">云车间看板</div>
    </div>
    <div class="work-right flex flex-a-c">
      <div class="flex flex-a-c">
        <a-icon
          :style="{
            fontSize: '16px',
            color: GLOBAL_THEME === 'dark' ? '#6E7DAC' : '#000',
          }"
          @click="handleSkin"
          type="skin"
        />
      </div>
      <div class="setting flex flex-a-c">
        <a-icon
          v-if="!fullscreen"
          :style="{
            fontSize: '16px',
            color: GLOBAL_THEME === 'dark' ? '#6E7DAC' : '#000',
          }"
          type="fullscreen"
          @click="isScreenFull"
        />
        <a-icon
          v-else
          :style="{
            fontSize: '16px',
            color: GLOBAL_THEME === 'dark' ? '#6E7DAC' : '#000',
          }"
          type="fullscreen-exit"
          @click="isScreenFull"
        />
      </div>
      <span
        :style="{
          fontSize: '16px',
          color: GLOBAL_THEME === 'dark' ? '#6E7DAC' : '#000',
        }"
        >|
      </span>
      <div class="year">{{ yearTime }}</div>
      <div class="hour">[ {{ hourTime }} ]</div>
      <span
        :style="{
          fontSize: '16px',
          color: GLOBAL_THEME === 'dark' ? '#6E7DAC' : '#000',
        }"
        >|
      </span>
      <div
        class="signOut"
        :style="{
          color: GLOBAL_THEME === 'dark' ? '#6E7DAC' : '#000',
        }"
        @click="handleOut"
      >
        退出大屏
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import screenfull from "screenfull";
import { createNamespacedHelpers } from "vuex";

const { mapMutations } = createNamespacedHelpers("mes/");

export default {
  name: "index",
  data() {
    return {
      yearTime: moment().format("YYYY-MM-DD"),
      hourTime: moment().format("HH:mm:ss"),
    };
  },
  created() {
    this.currentTime();
    this.isScreenFull();
  },
  computed: {
    GLOBAL_THEME() {
      return this.$store.state.mes.GLOBAL_THEME;
    },
    fullscreen() {
      return this.$store.state.mes.fullscreen;
    },
  },
  methods: {
    ...mapMutations(["changeGlobalTheme", "SetMesFullScreen"]),
    // 定时刷新数据函数
    currentTime() {
      setInterval(this.getTime, 1000);
    },
    getTime() {
      this.yearTime = moment().format("YYYY-MM-DD");
      this.hourTime = moment().format("HH:mm:ss");
    },
    // 换肤
    handleSkin() {
      if (this.GLOBAL_THEME === "dark") {
        this.changeGlobalTheme("light");
      } else {
        this.changeGlobalTheme("dark");
      }
    },
    // 退出大屏
    handleOut() {
      const that = this;
      this.$confirm({
        title: "提示",
        content: "确定退出吗?",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          that.$router.go(-1);
        },
        onCancel() {},
      });
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.SetMesFullScreen(!this.fullscreen);
        this.isScreenFull(); //触发全屏的方法
      }
    },
    //全屏方法
    isScreenFull() {
      if (!screenfull.isEnabled) {
        return false;
      }
      // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
      // 无需自己再判断当前屏幕状态
      this.SetMesFullScreen(!this.fullscreen);
      screenfull.toggle();
    },
  },
};
</script>

<style lang="less">
@import "../../index";
</style>
